<%--
  Created by IntelliJ IDEA.
  User: weiwei02
  Date: 2016/10/19
  Time: 22:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path;
    request.setAttribute("basePath", basePath);
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="top-grids">
    <div style="margin: 50px;"></div>
    <div class="recommended-info">
        <h3>${title}</h3>
    </div>
    <table class="table" contenteditable="true">
        <thead>
        <tr class="default">
            <th>编号</th>
            <th>名称</th>
            <th>企业类型</th>
            <th>操作</th>
        </tr>
        </thead>
        <c:forEach var="productors" items="#{list}" varStatus="id">
            <tr
                    <c:if test="${id.count%2==0}"> style="background-color: #dbebec;" </c:if>
            >
                <td><c:out value="${productors.id}">-</c:out></td>
                <td><c:out value="${productors.name}">-</c:out></td>
                <td><c:out value="${productors.type.type}">-</c:out></td>
                <td class="operate-productors" contenteditable="false">
                    <a href="#" style="color: #3498DB;"
                       operate="detail-productor"
                       data-title="<c:out value='${productors.name}'>生产厂商</c:out>的详情信息"
                       ajax="true"
                       url="${basePath}/manager/goods/productors/detail/<c:out value='${productors.id}'>1</c:out>">
                        <span class="glyphicon glyphicon-zoom-in"></span>
                    </a>
                    &nbsp;
                    <a href="#" style="color: #1ABC9C;"
                       data-toggle="tooltip" data-placement="top"
                       data-original-title="编辑信息"
                       url="${basePath}/goods/detail_goods/<c:out value='${productors.id}'>1</c:out>">
                        <span class="glyphicon glyphicon-pencil"></span>
                    </a>
                    &nbsp;
                    <a href="#" style="color: #E74C3C;"
                       operate="delete-productor"
                       data-toggle="tooltip" data-placement="top"
                       data-title="删除${productors.name}相关的信息"
                       detail-url="${basePath}/manager/goods/productors/detail/<c:out value='${productors.id}'>1</c:out>"
                       url="${basePath}/manager/goods/productors/delete/<c:out value='${productors.id}'>1</c:out>">
                        <span class="glyphicon glyphicon-remove"></span>
                    </a>
                    &nbsp;
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <div class="clearfix"></div>
    <div>
        <ul class="pagination">
            <li class="previous"><a href="#fakelink" class="fui-arrow-left"></a></li>
            <li class=""><a href="#fakelink">1</a></li>
            <li><a href="#fakelink">2</a></li>
            <li><a href="#fakelink">3</a></li>
            <li><a href="#fakelink">4</a></li>
            <li><a href="#fakelink">5</a></li>
            <li><a href="#fakelink">6</a></li>
            <li><a href="#fakelink">7</a></li>
            <li><a href="#fakelink">8</a></li>
            <li><a href="#fakelink">9</a></li>
            <li><a href="#fakelink">10</a></li>
                <li class="dropdown pagination-dropdown dropup active">
                    <a href="#fakelink"
                       class="dropdown-toggle"
                       aria-haspopup="true" aria-expanded="false"
                       data-toggle="dropdown">
                        <i class="fui-triangle-up"></i>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#fakelink">10–20</a></li>
                        <li class="active"><a href="#fakelink">20–30</a></li>
                        <li class=""><a href="#fakelink">40–50</a></li>
                    </ul>
                </li>
            <li class="next"><a href="#fakelink" class="fui-arrow-right"></a></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>

<div id="modal-container-detail-productor"
     class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel-productor" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel-productor">标题栏</h3>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button id="close-productor" class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                <button id="save-productor" class="btn btn-primary">保存</button>
                <button id="delete-productor" class="btn btn-danger">删除</button>
            </div>
        </div>
    </div>
</div>
<script src="${basePath}/resources/market/js/paganation.js"></script>
<script>

    $(function(){
        //列表界面删除按钮事件
        $("a[operate='delete-productor']").click(function () {
            //遮罩层标题
            $("#myModalLabel-productor").html($(this).attr("data-title"));
            $.getJSON($(this).attr('detail-url'),function (data) {
                //设置模态框
                setModalBodyViewDelete(data);
            })
        });
        function hideBtns() {
            $("#save-productor").off();
            $("#delete-productor").off();
            $("#delete-productor").hide();
            $("#save-productor").hide();
        }
        //    激活提示工具
        $("[data-toggle='tooltip']").tooltip();
        $("[data-toggle='tooltip']").tooltip();
        //激活下拉列表
        $('.dropdown-toggle').dropdown();

        /**查看生产厂商详情的遮罩层内容*/
        function detailModalContent(data) {
            function contratsHTML() {
                var html = "";
                for(var i in data.contrats){
                    html += "<footer>" + data.contrats[i].type.name + " : " + data.contrats[i].contrat + "</footer>";
                }
                html += "</blockquote>";
                return html;
            }
            var HTML =
                    "<dl class=\"view\">" +
                    "<blockquote><p>基本信息</p>" +
                    "<footer>名称 : " + data.name + "</footer>" +
                    "<footer>企业类型 : " + data.type.type + "</footer>" +
                    "<footer>营业执照编号 : " + data.code + "</footer></blockquote>" +
                    "<blockquote><p>联系方式</p>" + contratsHTML() +
                    "<blockquote><p>详细描述</p>" +
                    "<div>" + data.describe +"</div></blockquote>" +
                    "</dl>";
            return HTML;
        }

        /**设置查看详情信息遮罩层视图
         * @param data 服务器回应的JSON数据
         * @param operateId 操作编号*/
        function setModalBodyViewDelete(data) {
                //构建删除提示框
                var detailProductorModal = $("#modal-container-detail-productor").find(".modal-body");
                var HTML = detailModalContent(data);
                HTML = "<p class='alert-danger'>你确定要删除" + data.name + "的相关信息吗?" +
                            "<br>该操作将删除所有相关信息,且无法恢复!" +
                        "</p><br>" + HTML;
                detailProductorModal.html(HTML);
                hideBtns();
                $("#delete-productor").show();
                //为删除按钮绑定事件
                $("#modal-container-detail-productor").modal();
        }

        /**设置查看详情信息遮罩层视图*/
        function setModalBodyView(data) {
            var detailProductorModal = $("#modal-container-detail-productor").find(".modal-body");
            var HTML = detailModalContent(data);
            detailProductorModal.html(HTML);
            hideBtns();
            $("#modal-container-detail-productor").modal();
        }

        //查看生产厂商详情
        $(".operate-productors a[operate='detail-productor']").click(function () {
            //遮罩层标题
            $("#myModalLabel-productor").html($(this).attr("data-title"));
            $.getJSON($(this).attr("url"),function (data) {
                setModalBodyView(data);
            });
        })
    })
</script>